<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
            //1获取画布

            var canvas=document.getElementById('canvas');

            //2.获取画笔(上下文对象)

            var cx=canvas.getContext('2d');//二维平面

            //3.设置画笔样式

            cx.fillStyle='red';//实心的东西
            cx.strokeStyle='blue';//空心的东西

            //4.开始绘制

            //矩形
            // cx.fillRect(0,0,100,100);//起始坐标，宽度，高度
            // cx.strokeRect(100,100,100,50);

            //圆形
            // cx.beginPath();
            // cx.arc(200,200,100,0,Math.PI*2);//设置圆
            // cx.closePath();
            // cx.fill();//实心圆
            // cx.stroke();//空心圆

            //线段
            // cx.lineWidth=5;
            // cx.beginPath();
            // cx.moveTo(0,0);
            // cx.lineTo(100,100);
            // cx.lineTo(200,10);
            // cx.lineTo(300,100);
            // cx.closePath();
            // cx.stroke();//只能用stroke画
            // cx.moveTo(0,200);
            // cx.lineTo(200,200);
            // cx.stroke();

            //渐变图形
            //线性渐变
            // var g=cx.createLinearGradient(0,0,200,0);
            // g.addColorStop(0,'red');
            // g.addColorStop(0.5,'pink');
            // g.addColorStop(1,'blue');
            // cx.fillStyle=g;
            // cx.fillRect(0,0,200,200);
            //径向渐变
            // var g=cx.createRadialGradient(200,200,50,100,200,200);
            // g.addColorStop(0,'red');
            // g.addColorStop(0.3,'orange');
            // g.addColorStop(1,'green');
            // cx.fillStyle=g;
            // cx.beginPath();
            // cx.arc(200,200,200,0,Math.PI*2);
            // cx.closePath();
            // cx.fill();

            // cx.save();
            // cx.fillRect(0,0,100,50);
            // cx.translate(100,100);
            // cx.scale(2,2);
            // cx.rotate(Math.PI/3);           
            // cx.fillRect(0,0,100,50);
            // cx.restore();
            // cx.fillRect(120,0,100,50);

            // cx.fillRect(100,100,100,100);
            // cx.beginPath();
            // cx.arc(200,200,50,0,Math.PI*2);
            // cx.closePath();
            // cx.fillStyle='blue';
            // cx.fill();

            //文字
            cx.font='30px blod';
            cx.fillText('hello',200,200);
            cx.strokeText('world',200,100);
        } 
    </script>
</head>
<body>
    <canvas id="canvas" width="400px" height="400px" style="background-color: #ccc;"></canvas>
</body>
</html>